<template>
  <div class="nav-bar">
    <div class="hometitle"><p>首页</p></div>
    <div class="iptBox">
      <van-search placeholder="理想家" @focus="searchView"></van-search>

      <van-icon name="scan" size="22" @click="richScan" />
      <van-popup
        v-model="QrcodeShow"
        position="right"
        :style="{ height: '100%', width: '100%' }"
      >
        <qrcode-stream
          v-show="qrcode"
          :camera="camera"
          :torch="torchActive"
          @decode="onDecode"
          @init="onInit"
        >
          <div>
            <div class="qr-scanner">
              <p class="qr-scanner-title">扫一扫</p>
              <van-icon
                @click="closeScan"
                size="26"
                name="arrow-left"
                color="#fff"
              />
              <p class="error-text">{{ error }}</p>
              <div class="box">
                <div class="line"></div>
                <div class="angle"></div>
                <p>将二维码放入框内，即可自动扫描</p>
              </div>
              <!-- <van-icon color="#fff" @click="switchCamera" name="replay" />
              <p class="">相机反转</p> -->
            </div>
          </div>
        </qrcode-stream>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { QrcodeStream } from "vue-qrcode-reader";
export default {
  name: "NavBar",
  components: { QrcodeStream },
  data() {
    return {
      QrcodeShow: false,
      result: "", // 扫码结果信息
      error: "", // 错误信息
      // show: false,
      qrcode: true,
      torchActive: true,
      camera: "rear",
    };
  },
  methods: {
    // 点击弹出扫码
    richScan() {
      console.log(11);
      this.QrcodeShow = true;
      this.camera = "rear";
    },
    // 遮罩回去
    closeScan() {
      this.QrcodeShow = false;
      this.camera = "off";
    },

    onDecode(result) {
      // alert(result);
      this.result = result;
      window.open(this.result);
    },
    // 摄像头扫码
    async onInit(promise) {
      // const { capabilities } = await promise;

      // const TORCH_IS_SUPPORTED = !!capabilities.torch;
      // TORCH_IS_SUPPORTED;
      try {
        await promise;
      } catch (error) {
        if (error.name === "NotAllowedError") {
          this.error = "ERROR: 您需要授予相机访问权限";
        } else if (error.name === "NotFoundError") {
          this.error = "ERROR: 这个设备上没有摄像头";
        } else if (error.name === "NotSupportedError") {
          this.error = "ERROR: 所需的安全上下文(HTTPS、本地主机)";
        } else if (error.name === "NotReadableError") {
          this.error = "ERROR: 相机被占用";
        } else if (error.name === "OverconstrainedError") {
          this.error = "ERROR: 安装摄像头不合适";
        } else if (error.name === "StreamApiNotSupportedError") {
          this.error = "ERROR: 此浏览器不支持流API";
        }
      }
    },
    switchCamera() {
      // console.log(this.camera);
      switch (this.camera) {
        case "front":
          this.camera = "rear";
          console.log(this.camera);
          break;
        case "rear":
          this.camera = "front";
          console.log(this.camera);
          break;
      }
    },

    // 搜索框聚焦事件
    searchView() {
      this.$router.push("/search");
    },
  },
};
</script>


<style scoped lang="scss">
.nav-bar {
  width: 100vw;
  height: 54px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  box-sizing: border-box;
  background-color: var(--bgcColor);
  .hometitle {
    width: 12vw;
    margin-left: 0.625rem;

    p {
      font-family: "Courier New", Courier, monospace;
      font-size: 1.25rem;
      line-height: 3.75rem;
    }
  }
  .iptBox {
    width: 90vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    .van-search {
      width: 100%;
      background-color: var(--bgcColor);
      box-sizing: border-box;
      .van-search__content {
        background-color: white;
        box-shadow: 1px 1px 6px #eee;
      }
    }
    .van-icon {
      position: absolute;
      right: 1.25rem;
      top: 50%;
      transform: translateY(-50%);
    }
    .van-popup {
      .qr-scanner {
        position: relative;
        .error-text {
          color: red;
          text-align: center;
          // margin-top: 6.25rem;
        }
        .box {
          width: 15rem;
          height: 15rem;
          border: 1px solid #fff;
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translateY(60%) translateX(-50%);
          p {
            color: white;
            position: absolute;
            bottom: -1.875rem;
          }
          .line {
            width: 100%;
            height: 2px;
            background-image: linear-gradient(
              43deg,
              #ffffff00 0%,
              #ffffff 54%,
              #ffffff00 100%
            );

            animation: csmove 2s linear infinite;
          }
          @keyframes csmove {
            0% {
              transform: translateY(0);
            }
            0% {
              transform: translateY(15rem);
            }
          }
        }
        .qr-scanner-title {
          width: 100%;
          font-size: 1.25rem;
          color: white;
          text-align: center;
          position: absolute;
          top: 1.125rem;
          left: 50%;
          transform: translateX(-50%);
        }
        .van-icon {
          position: absolute;
          top: 1.875rem;
          left: 1.25rem;
        }
      }
    }
  }
}
</style>
